<template>
  <BorderBox10 class="w-full h-full">
    <div class="p-4">
      <Title :title="`用户数据`"></Title>

      <div class="w-full mt-6 h-28 flex justify-around items-center">
        <div class="flex flex-col items-center">
          <Decoration9 style="width:6rem;height: 6rem;">
            <div class="contents" >
              <p class="text-[#00FFFF] text-xs">{{ data.register }}</p>
            </div>
          </Decoration9>
          <p class="text-[#00FFFF] text-xs mt-1">注册总数</p>
        </div>
        <el-icon class="text-[#00FFFF] text-lg">
          <ArrowRightBold/>
        </el-icon>
        <div class="flex flex-col items-center">
          <Decoration9 style="width:6rem;height: 6rem;">
            <div class="contents" >
              <p class="text-[#00FFFF] text-xs">{{ data.vip }}</p>
            </div>
          </Decoration9>
          <p class="text-[#00FFFF] text-xs mt-1">会员总数</p>
        </div>
        <el-icon class="text-[#00FFFF]">
          <ArrowRightBold/>
        </el-icon>
        <div class="flex flex-col items-center">
          <Decoration9 style="width:6rem;height: 6rem;">
            <div class="contents" >
              <p class="text-[#00FFFF] text-xs">{{ data.expire }}</p>
            </div>
          </Decoration9>
          <p class="text-[#00FFFF] text-xs mt-1">过期会员总数</p>
        </div>
      </div>
    </div>
  </BorderBox10>

</template>

<script setup>
import { BorderBox10, Decoration8, Decoration9 } from '@kjgl77/datav-vue3'
import { defineProps } from 'vue'
import Title from '@/view/memberManager/components/title.vue'
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        register: 0,
        vip: 0,
        expire: 0
      }
    }
  }
})

const initPage = () => {

}

</script>


<style scoped>

</style>
